<!-- 
说明：列表
作者：刘永盛 
日期：2018-7-2 19:52:54 
版本：1.0.0
-->
<template>
  <div>
    <mk-search-box>
      <el-row>
        <el-col :span="5">
          <label>文章标题:</label>
          <el-input v-model="ui.searchData.catitle"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>创建时间:</label>
          <el-date-picker v-model="ui.searchData.createtime"
                          type="daterange"
                          align="right"
                          format="yyyy-MM-dd"
                          placeholder="选择日期范围"
                          :picker-options="pickerOptions2">
          </el-date-picker>
        </el-col>
        <el-col :span="3">
          <mk-search-buttons v-model="ui.searching" />
        </el-col>
      </el-row>
    </mk-search-box>
    <el-row>
      <add @reload="doSearch" />
    </el-row>
    <mk-table v-model="ui"
              mk-index
              :mk-init-search-data="initSearchData"
              mk-sql-code="cuArticle.select_list"
              mk-table-id="cu-article.list.common"
              ref="table">
      <el-table-column align="left"
                       prop="caimg"
                       label=""
                       width="40">
        <template slot-scope="scope">
          <mk-img-view :img="scope.row.caimg"
                       hover-max
                       mini />
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="catitle"
                       label="文章标题"
                       width="200" />
      <el-table-column align="left"
                       prop="creatername"
                       label="作者"
                       width="120" />
      <el-table-column align="left"
                       prop="createtime"
                       label="创建时间"
                       width="190" />
      <el-table-column prop="doing"
                       align="center"
                       label="操作"
                       width="120">
        <template slot-scope="scope">
          <edit :row="scope.row"
                @reload="doSearch" />
          <mk-button :type="4"
                     confirm-text="确定要删除么？"
                     @click="deleteByid(scope.row.caid)">删除</mk-button>
        </template>
      </el-table-column>
    </mk-table>
  </div>
</template>

<script>
  import {
    MkBase
  } from 'element-ui'
  import Add from './list/add-button'
  import Edit from './list/edit-button'
  import searchData from './list/search-data'
  import dayjs from 'dayjs'

  export default {
    name: 'cu-article-list',
    mixins: [MkBase],
    components: {
      Add,
      Edit
    },
    data () {
      return {
        ui: {
          searching: true,
          searchData: searchData()
        },
        pickerOptions2: {
          shortcuts: [
            {
              text: '最近一周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }
      }
    },
    methods: {
      /**
       * 刷新本页面
       */
      doSearch () {
        this.ui.searching = true
      },

      async deleteByid (caid) {
        let data = await this.$delete('cuArticle/deleteByid.json', {
          caid
        })
        if (data) {
          this.doSearch()
        }
      },
      initSearchData (data, flag) {
        if (data.createtime) {
          data.bdate = dayjs(data.createtime[0]).format('YYYY-MM-DD 00:00:00')
          data.edate = dayjs(data.createtime[1]).format('YYYY-MM-DD 23:59:59')
        }
      }
    }
  }
</script>